<template>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.p"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length">
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'UserPage',
    mounted(){
        // 初始化分页信息
        // this.pageInfo.p = 1
    },
    methods:{
        // 切换页面尺寸（尺寸修改后, 页面固定为第一页）
        handleSizeChange(value){
            this.$router.push({
                path: '/admin/user',
                query: {
                    size: value,
                    p: 1
                }
            })
            this.reloadRouterView()
        },
        // 切换页面
        handleCurrentChange(value){
            this.$router.push({
                path: '/admin/user',
                query: {
                    size: this.pageInfo.size,
                    p: value,
                }
            })
            this.reloadRouterView()
        }
    },
    computed:{
        userList(){
            return this.$store.state.user.userList
        },
        pageInfo(){
            return {
                size: parseInt(this.$route.query.size) || 5,
                p: parseInt(this.$route.query.p) || 1
            }
        },
    },
    props: ['reloadRouterView']
}
</script>

<style>

</style>